<template>
  <div>
    <van-nav-bar :title="title" class="navBar" :left-text="leftArrow ? leftText : ''" :left-arrow="leftArrow" 
      placeholder @click-left="onClickLeft">
      <template #right>
        
        <!-- <span class="userName">{{userInfo.username}}</span> -->
        <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect" placement="bottom-end">
          <template #reference>
            <img class="userImg" src="../../assets/images/image.svg" />
            <van-button type="primary">{{userInfo.username}}</van-button>
          </template>
        </van-popover>
      </template>
    </van-nav-bar>

  </div>
</template>
<script>
  import { Toast } from "vant";
  import { ref } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { logoutApi } from "@/apis/index";


  export default {
    name: "Home",
    props: {
      title: {
        type: String,
        default: '标题'
      },
      leftArrow: {
        type: Boolean,
        default: true
      },
      leftText: {
        type: String,
        default: '返回'
      }
    },
    data () {
      return {
      };
    },
    components: {},
    mounted () { },
    created () { 

    },
    methods: {},
    setup () {
      const $router = useRouter();
      const routeUrl = useRoute();
      const userInfo = ref(JSON.parse(sessionStorage.getItem("userinfo")));
      console.log(userInfo);

      //const onClickLeft = () => history.back();
      const onClickLeft = function(){
          if(routeUrl.path.indexOf('taskDetail') >=0){
            $router.replace('/taskList');
          }else{
            history.back();
          }
      }

      const showPopover = ref(false);
      const actions = [
        { text: '退出' }
      ];
      const onSelect = function() {
        let token = sessionStorage.getItem("accessToken");
        logoutApi(token).then(res => {
          if (res.code === 1) {
            sessionStorage.clear();
            $router.replace('/login');
          }
        })
      };

      return {
        userInfo,
        onClickLeft,
        actions,
        onSelect,
        showPopover
      };
    },
  };
</script>
<style lang="scss">
  $paddingLeft: 15px;

  .navBar {
    background-color: #3f9eff;

    .van-nav-bar {
      background-color: #3f9eff;
    }

    .van-hairline--bottom:after {
      border-bottom: 0;
    }

    .van-nav-bar__title,
    .van-nav-bar .van-icon,
    .van-nav-bar__text {
      color: #ffffff;
    }
  }

  .van-dropdown-menu__bar {
    background: transparent;
    box-shadow: none !important;
  }

  .van-dropdown-menu__title {
    font-size: 14px !important;
  }
</style>
<style lang="scss" scoped>
  .userImg {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
    background-color: #ffffff;
  }

  .userName {
    font-size: 14px;
    color: #ffffff;
  }
</style>